<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02-fly.css">
</head>
<body>
    <div class="box">
        <!-- <span class="zidan"></span> -->
        <img src="./bd.png" alt="">
    </div>
    <script>
        // 当按下上下左右键盘,设置img的移动
        // 按下空格键 创建span标签 设置span标签从飞机头到页面最上方的动画 再删除span标签


        var img = document.querySelector(".box > img");
        var box = document.querySelector(".box");


        function aaa(e){
             // console.log(e);
            // 3.判断如果按下的不是37-40的值 直接结束函数运行
            if(e.keyCode < 37 || e.keyCode > 40) return;

            // 4.获取当前img标签的位置
            var l = img.getBoundingClientRect().x;
            var y = img.getBoundingClientRect().y;

            // 2.通过判断按下的键码值 确定按下的是上下左右 做出不一样的操作
            if(e.keyCode == 37){
                // 左
                l -= 10;
                if(l < 0) l = 0;
            }else if(e.keyCode == 38){
                // 上
                y -=10;
                if(y < 0) y = 0;
            }else if(e.keyCode == 39){
                // 右
                var maxl = window.innerWidth - img.offsetWidth;
                l += 10;
                if(l > maxl) l = maxl;
            }else if(e.keyCode == 40){
                // 下
                var maxy = window.innerHeight - img.offsetHeight;
                y += 10;
                if(y > maxy) y = maxy;
            }

            img.style.top = y + "px";
            img.style.left = l +"px";
        }
        
        // 1.添加键盘事件
        window.addEventListener("keydown",aaa)
        // 1.设置空格的按下事件
        window.addEventListener("keydown",function(e){
            // 2.如果按下的是不是空格,就结束这个函数的运行
            if(e.keyCode != 32) return;

            // 3.创建一个标签对象 span
            var span = document.createElement("span");
            // 4.添加class 带有子弹的样式
            span.classList.add("zidan");
            // 5.将span追加至box标签内
            box.appendChild(span);

            // 7.计算span的初始位置
            var sl = img.getBoundingClientRect().x + img.offsetWidth / 2 - span.offsetWidth / 2;
            var st = img.getBoundingClientRect().y;

            // 6.设置span的初始位置
            span.style.left = sl + "px";
            span.style.top = st + "px";
            // 7设置延迟,确保在第6步执行完成后 再设置新的span的位置
            setTimeout(function(){
                // 设置过度时间 完成top值更改的动画效果
                // transitionDuration 完成过渡效果需要花费的时间（以秒或毫秒计）
                span.style.transitionDuration = "0.3s";
                span.style.top = -40 + "px";
            },4)

            // 8.等top的动画执行完成后, 删除span标签
            setTimeout(function(){
                box.removeChild(span);
            },500)

        })
    </script>
</body>

</html>